<!doctype html>
<title>::part():disabled grouping</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
<style>
  my-element::part(button) {
    font-family: fantasy;
  }
  my-element::part(button):disabled {
    background-color: #ff0000;
  }
  my-element::part(button):disabled,
  p {
    color: #0000ff;
  }
  my-element::part(not-a-part):disabled,
  p {
    font-family: monospace;
  }
</style>
<body>
  <my-element id="subject"></my-element>
  <p id="grouped">Text</p>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script>
    const RED = "rgb(255, 0, 0)";
    const BLUE = "rgb(0, 0, 255)";
    customElements.define(
      "my-element",
      class MyElement extends HTMLElement {
        connectedCallback() {
          this.attachShadow({
            mode: "open",
          }).innerHTML = `
              <button part="button" disabled>Test</button>
            `;
          this.elementInternals = this.attachInternals();
        }

        get inner() {
          return this.shadowRoot.querySelector("[part=button]");
        }
      },
    );

    test(() => {
        assert_equals(getComputedStyle(subject.inner).fontFamily, 'fantasy');
    }, "Styles applied to ::part(...)");

    test(() => {
        assert_equals(getComputedStyle(subject.inner).backgroundColor, RED);
    }, "Styles applied to ::part(...):disabled");

    test(() => {
        assert_equals(getComputedStyle(subject.inner).color, BLUE);
        assert_equals(getComputedStyle(grouped).color, BLUE);
    }, "Styles applied via grouped selector including matched ::part(...):disabled");

    test(() => {
        assert_equals(getComputedStyle(grouped).fontFamily, 'monospace');
    }, "Styles applied via grouped selector including unmatched ::part(...):disabled");
  </script>
</body>
